<template>
  <div id="main_div">
    <el-card style="width: 500px;height: 300px;margin: 50px auto">
      <h1 style="margin-left: 180px">用户登录</h1>
      <el-form label-width="100px" style="margin-top: 50px">
        <el-form-item label="用户名:">
          <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="position: relative;left: 100px" type="primary" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const user = ref({username: "", password: ""});
const login = () => {
  let data = qs.stringify(user.value);
  axios.post('http://localhost:8080/v1/users/login', data)
      .then((response) => {
        if (response.data.code == 2001) {
          ElMessage.success("登录成功!");
          let user = response.data.data;
          localStorage.setItem('user',JSON.stringify(user));
          // router.push('/'); 跳转到首页,但是头和脚不会重新加载
          location.href='/'; //跳转到首页 整个页面重新加载
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
</script>

<style scoped>
#main_div {
  overflow: hidden;
  height: 500px;
  background-image: url("/public/imgs/loginbg.gif");
  background-size: cover; /*设置封面尺寸*/
  background-position: center; /*设置背景图片居中*/
}
</style>